<template>
	<transition name="fade">
		<div class="food" v-show="showFlag" ref="food">
			<div class="food-content">
				<div class="img-header">
					<img :src="food.image" :alt="food.name" class="img"/>
					<div class="back" @click="hide">
	                    <i class="icon-arrow_lift"></i>
	                </div>
				</div>
				<div class="content">
					<h1 class="title">{{food.name}}</h1>
					<div class="detail">
						<span class="sell-count">月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
					</div>
					<div class="price">
						<span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wrap">
						<cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
					</div>
					<transition name="fade"> 
                    	<div class="buy" v-show="food.count === 0 || !food.count" @click.stop.prevent="addFirst($event)">
	                      	加入购物车 
	                    </div>
	                </transition>
				</div>
				<split v-show="food.info"></split>
				<div class="info" v-show="food.info">
					<h1 class="title">商品介绍</h1>
					<p class="text">{{food.info}}</p>
				</div>
				<split></split>
				<div class="rating">
					<h1 class="title">商品评价</h1>
					<ratingselect 
						:select-type="selectType" 
						:only-content="onlyContent" 
						:desc="desc" 
						:ratings="food.ratings" 
						v-on:ratingtype-select="changeSelectType" 
						v-on:content-toggle="toggleOnlyContent">
					</ratingselect>
					<div class="rating-wrap">
						<ul v-show="food.ratings&&food.ratings.length">
							<li v-show="newShow(rating.rateType,rating.text)" v-for="rating in food.ratings" class="rating-item">
								<div class="user">
									<span class="name">{{rating.username}}</span>
									<img :src="rating.avatar" width="12" height="12" class="avatar"/>
								</div>
								<div class="time">
									{{rating.rateTime | formatDate}}
								</div>
								<p class="text">
									<span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>
									{{rating.text}}
								</p>
							</li>
						</ul>
						<div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import BScroll from 'better-scroll';
	import Vue from "vue"
	import cartcontrol from "@/components/cartControl/CartControl"
	import split from "@/components/split/Split"
	import ratingselect from "@/components/ratingselect/RatingSelect"
	import {formatDate} from "@/common/js/data.js"
	const POSITIVE = 0;
	const NEGATIVE = 1;
	const ALL = 2;
	export default{
		props:{
			food:{
				type:Object,
				
			}
		},
		data(){
			return{
				showFlag:false,
				selectType:ALL,
				onlyContent:false,
				desc:{
					all:'全部',
					positive:'推荐',
					negative:'吐槽'
				}	
			}
		},
		methods:{
			show(){
				this.selectType = ALL;
				this.onlyContent = false;
				this.showFlag=true;
				this.$nextTick(()=>{
					console.log(this.scroll)
            		if(!this.scroll){
            			this.scroll = new BScroll(this.$refs.food,{
            				click:true
            			})
            		}else{
            			this.scroll.refresh();
            		}
            	})
			},
			hide(){
				this.showFlag=false
			},
			addFirst(event){
				this.$emit('cart-add', event.target);
            	Vue.set(this.food, 'count', 1);
			},
			cartAdd(target){
				this.$emit('cart-add',target);
			},
			// 改变 selectType
			changeSelectType(type){
				this.selectType=type;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			// 改变 onlyContent
			toggleOnlyContent(con){
				this.onlyContent=con;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			//判断评论是否显示
			newShow(type,text){
				if(this.onlyContent&&!text){
					return false
				}
				//判断是否显示全部评价
				if(this.selectType==ALL){
					return true
				}else{
					return type===this.selectType
				}
			}
		},
		filters:{
			formatDate(time){
				let date=new Date(time);
				return formatDate(date,'yyyy-MM-dd hh:mm');
			}
		},
		components:{
			cartcontrol,
			split,
			ratingselect
		}
	}
</script>

<style lang="stylus">
	.food
		position:fixed
		top:0
		left:0
		bottom:48px
		width:100%
		z-index:30
		background:#fff
		&.fade-enter-active, &.fade-leave-active
			transition:all 0.3s linear
			transform:translate3d(0,0,0)
		&.fade-enter, &.fade-leave-active
			opacity:0
			transform:translate3d(100%,0,0)
		.food-content
			.img-header
				position:relative
				height:0
				width:100%
				padding-top:100%
				.img
					position:absolute
					top:0
					left:0
					width:100%
					height:100%
				.back
					position:absolute
					top:10px
					left:0
					.icon-arrow_lift
						display:inline-block
						padding:10px
						font-size:20px
						color:#ff6600
			.content
				padding:18px
				position:relative
				.title
					font-size:14px
					line-height:14px
					color:rgb(7,17,27)
					font-weight:700
					margin-bottom:8px
				.detail
					margin-bottom:18px
					font-size:10px
					line-height:10px
					height:10px
					color:rgb(147,153,159)
					.sell-count
						margin-right:12px
				.price
					font-weight:700
					line-height:24px
					height:24px
					.now
						font-size:14px
						color:rgb(240,20,20)
					.old
						font-size:10px
						margin-left:12px
						text-decoration:line-through
						color:rgb(147,153,159)
				.cartcontrol-wrap
					position:absolute
					right:12px
					bottom:12px
				.buy
					position:absolute
					right:18px
					bottom:18px
					z-index:10
					height:24px
					line-height:24px
					padding:0 12px
					box-sizing:border-box
					font-size:10px
					border-radius:10px
					color:#fff
					background:rgb(0,160,220)
					&.fade-enter-active, &.fade-leave-active
						transition:all 0.2s
						opacity:1
					&.fade-enter, &fade-leave-active
						opacity:0
			.info,.rating
				padding:18px
				.title
					font-size:14px
					line-height:14px
					color:rgb(7,17,27)
					margin-bottom:8px
				.text
					font-size:12px
					font-weight:200
					line-height:24px
					color:rgb(77,85,93)
				.rating-wrap
					.rating-item
						position:relative
						padding:16px 0
						border-bottom:1px solid rgba(7,17,27,0.1)
						.user
							position:absolute
							right:0
							top:16px
							line-height:12px
							font-size:0
							.name
								display:inline-block
								margin-right:6px
								vertical-align:top
								font-size:10px
								color:rgb(147,153,159)
							.avator
								border-radius:50%
						.time
							margin-bottom:6px
							line-height:12px
							font-size:10px
							color:rgb(147,153,159)
						.text
							line-height:16px
							font-size:12px
							color:rgb(7,17,27)
							.icon-thumb_up,.icon-thumb_down
								margin-right:4px
								line-height:16px
								font-size:12px
								&.icon-thumb_up
									color:rgb(0,160,220)
								&.icon-thumb_down
									color:rgb(147,153,159)	
					.no-rating
						padding:16px 0
						font-size:12px
						color:rgb(147,153,159)							
			
				
			
</style>